<script setup>
import { ref,computed } from 'vue'
import { addPostList, getPostDetalis ,editPostList} from '@/api/post.js'
const emit = defineEmits([''])
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  }
})
const form = ref({
  postName: '',
  positionId: '',
  sort: null,
  status: null,
  comment: ''
})
//数字框
const numChange = (value) => {
  form.value.sort = value
}
//关闭回调
const close = () => {
  form.value = {
    postName: '',
    positionId: '',
    sort: null,
    status: null,
    comment: ''
  }
  emit('update:showDialog', false)
}
//确认
const btnOK = async () => {
  if(form.value.id){
    await editPostList(form.value)
  }else{
    await addPostList(form.value)
  }
  emit('updateList')
  close()
}
//暴露方法
const getPostDetalisApi = async (id) => {
  const { data } = await getPostDetalis(id)
  form.value = data
}
defineExpose({
  getPostDetalisApi
})
//标题
const titleText=computed(()=>{
 return form.value.id?'修改岗位':'增加岗位'
})
</script>
<template>
  <el-dialog :title="titleText" v-model="props.showDialog" @close="close" width="600">
    <div class="dialogBox">
      <el-form label-position="top">
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位名称">
              <el-input
                placeholder="请输入"
                size="large"
                style="width: 245px"
                v-model="form.postName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位编码">
              <el-input
                placeholder="请输入"
                size="large"
                style="width: 245px"
                v-model="form.positionId"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位顺序">
              <el-input-number
                v-model="form.sort"
                :min="1"
                placeholder="请输入"
                controls-position="right"
                size="large"
                @change="numChange"
                style="width: 245px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位状态">
              <el-radio-group v-model="form.status">
                <el-radio :label="1" size="large">禁用</el-radio>
                <el-radio :label="0" size="large">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="form.comment"
                placeholder="请输入"
                type="textarea"
                size="large"
                style="width: 515px"
                :rows="2"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button round size="large" style="width: 100px" @click="close()">取消</el-button>
        <el-button type="success" round size="large" style="width: 100px" @click="btnOK"
          >确认</el-button
        >
      </el-row>
    </div>
  </el-dialog>
</template>
<style lang="scss" scoped>
::deep(.el-dialog__header) {
  border-bottom: 1px solid solid;
}
.dialogBox {
  padding: 10px 10px 0;
}
:deep(.el-input__wrapper) {
  border-radius: 10px;
  background-color: #f9f9f9;
}
</style>
